<script setup name="comment">
import { ref } from "vue"
import { useRepassword } from "@/composables/useManager"
import { useInitTable } from "@/composables/useCommon"
import { getGoodsCommentList, updateGoodsCommentStatus, reviewComment } from "@/api/goods_comment"

// 客服回复
const textarea = ref('')
// 解构公用方法
const { windowHeight, searchForm, tableData, loading, currentPage, total, limit, circleUrl, resetSearchForm, getData, toast, handleStatusChange } = useInitTable({
  searchForm: { keyword: "" },
  getList: getGoodsCommentList,
  updateStatus: updateGoodsCommentStatus,
  onGetList: res => {
    tableData.value = res.list.map(ope => {
      ope.statusLoading = false
      ope.textareaEdit = false
      return ope
    })
    total.value = res.totalCount
  }
})


// 获取仓库数据
const { user } = useRepassword()
// 减去头部高度、标签高度、内边距高度
let h = windowHeight.value - 64 - 44 - 36
const h2 = windowHeight.value - 64 - 44 - 120

// 显示文本域
const showTextarea = (row, data = '') => {
  textarea.value = ''
  row.textareaEdit = true
}

// 客服回复
const review = async row => {
  if (!textarea.value) return toast('回复内容不能为空', 'error')
  await reviewComment(row.id, textarea.value)
  row.textareaEdit = false
  toast('回复成功')
  await getData()
}
</script>

<template>
  <el-card shadow="never" :body-style="{ 'padding-bottom': '10px', 'padding-left': '0', 'padding-right': '0' }"
    :style="{ height: `${h}px` }">
    <el-form :model="searchForm" class="searchForm" size="small">
      <el-row :gutter="10">
        <el-col :sm="15" :span="14">
          <el-form-item label="关键词">
            <el-input v-model="searchForm.title" placeholder="商品标题" clearable />
          </el-form-item>
        </el-col>

        <el-col :sm="9" :span="10">
          <el-form-item class="but-form">
            <el-tooltip effect="light" content="搜索" placement="top">
              <el-button type="success" size="small" @click="getData">
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip effect="light" content="重置" placement="top">
              <el-button type="info" size="small" @click="resetSearchForm">
                <el-icon>
                  <RefreshRight />
                </el-icon>
              </el-button>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="card-table" :style="{ height: `${h2}px` }">
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" :row-key="(row) => row.id">
        <el-table-column type="expand" min-width="16">
          <template #default="{ row }">
            <div class="expand">
              <el-avatar :size="40" :src="row.user.avatar" fit="cover" />
              <div class="content">
                <h6>
                  {{ row.user.nickname || row.user.username }}
                  <small class="review">{{ row.review_time }}</small>
                  <el-button v-if="!row.textareaEdit && !row.extra" size="small" class="btn"
                    @click="showTextarea(row)">回复</el-button>
                </h6>
                {{ row.review.data }}
                <div class="custom">
                  <el-image :size="40" v-for="(item, index) in row.review.image" :key="index" :src="item" fit="cover"
                    :preview-src-list="[item]" preview-teleported />
                </div>

                <div class="review" v-if="row.textareaEdit">
                  <el-input v-model="textarea" placeholder="请输入回复内容" clearable type="textarea" :rows="2" resize="none" />
                  <div class="actions">
                    <el-button type="primary" size="small" class="btn" @click="review(row)">回复</el-button>
                    <el-button size="small" class="btn" @click="row.textareaEdit = !row.textareaEdit">取消</el-button>
                  </div>
                </div>

                <template v-else>
                  <div class="cservice" v-for="(item, index) in row.extra" :key="index">
                    <h6>
                      客服
                      <el-button type="info" size="small" class="btn" @click="showTextarea(row, item.data)">修改</el-button>
                    </h6>
                    <p>{{ item.data }}</p>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="ID" min-width="50" align="center" prop="id" />

        <el-table-column label="商品" min-width="150" align="center">
          <template #default="{ row }">
            <div class="avatar">
              <el-image :size="40" :src="row.goods_item.cover ?? ''" fit="cover"
                :preview-src-list="[row.goods_item.cover]" preview-teleported>
                <template #error>
                  <img :src="circleUrl">
                </template>
              </el-image>
              <div class="avatar-info">
                <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="评价信息" align="center" min-width="96">
          <template #default="{ row }">
            <div>
              <p>用户：{{ row.user.nickname || row.user.username }}</p>
              <p>
                <el-rate v-model="row.rating" disabled show-score text-color="#ff9900" />
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="评价时间" align="center" prop="review_time" />

        <el-table-column label="是否显示" align="center">
          <template #default="{ row }">
            <el-switch v-model="row.status" size="small" :active-value="1" :inactive-value="0"
              :loading="row.statusLoading" :disabled="row.super === 1 || row.id === user.id"
              style="--el-switch-on-color: #13ce66" @change="handleStatusChange($event, row)" />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" :image-size="200" />
        </template>
      </el-table>

      <div class="manager-pagination">
        <el-pagination background small layout="prev, pager, next" :total="total" :current-page="currentPage"
          :page-size="limit" :hide-on-single-page="total < 11" @current-change="getData" />
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  border: 0;
  overflow-y: auto;

  .el-select {
    width: 100%;
  }

  .searchForm {
    padding: 0 10px;

    .el-row {
      align-items: center;

      .el-col:last-child {
        display: flex;
        justify-content: end;
      }

      .refresh-form {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 10px;
  }

  .card-table {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .el-table {
      z-index: 0;

      .expand {
        display: flex;
        padding: 0 8px;

        .content {
          flex: 1;
          margin-left: 6px;

          h6 {
            display: flex;
            align-items: center;

            .review {
              color: var(--gray400);
              margin-left: 4px;

            }

            .btn {
              margin-left: auto;
            }
          }

          .custom {
            padding: 4px 0;

            .el-image {
              width: 100px;
              height: 100px;
              border-radius: 6px;
            }
          }

          .cservice {
            margin-top: 6px;
            background: var(--gray100);
            padding: 6px;
            border-radius: 4px;

            h6 {
              display: flex;
              font-weight: bold;
            }
          }

          .review {
            padding: 4px 0;

            .actions {
              margin-top: 4px;

              :last-child.el-button {
                margin-left: 4px;
              }
            }
          }
        }
      }

      .avatar {
        display: flex;
        align-items: center;
        padding-left: 2vw;
        text-align: left;

        .el-image {
          width: 60px;
          height: 60px;
          border-radius: 4px;
        }

        &-info {
          margin-left: 2vw;
        }
      }

      .el-icon {
        cursor: pointer;
        margin: 0 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .manager-pagination {
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }

  .but-form {
    .el-button {
      margin: 2px;

      .el-icon {
        color: var(--white);
      }
    }
  }

  :deep(.choose-dialog) {
    .el-dialog__body {
      padding: 0;
    }
  }
}

@media screen and (max-width: 375px),
screen and (max-width: 414px) {
  :deep(.el-dialog--center) {
    min-width: 80% !important;
    max-width: 80% !important;
  }

  .searchForm {
    padding: 0 10px;
  }

  .card-table {
    .el-table {
      .el-icon {
        margin: 0 4px !important;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .manager-pagination {
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
  }
}
</style>
